跳至主要内容

[Vue CLI] 環境變數&輸出路徑

TL;DR​

在Vue CLI中，我們可以根據開發或上線環境，分別設定環境變數。

參考資料​

相關連結​

輸出路徑調整​

我們可以使用vue ui在GUI介面中直接調整輸出路徑為dist資料夾

GUI調整輸出路徑

或是也可以直接在專案資料夾設定vue.config.js如下：

vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/dist/'
})

接著我們就可以使用npm run build將目前的專案給輸出到dist資料夾中。

並且使用VSC內的Live Server Plugin去開啟一個網路伺服器。

環境變數​

環境變數簡介​

在專案開發時，有些變數會因為在不同環境下，變數內容需要調整。

例如API的路徑，在開發階段可能是使用內部的路徑。當上線到正式主機時，則需要修改成公開的路徑。

這時候就可以使用環境變數來統一管理

Vue CLI 環境變數分類​

Vue CLIk的環境變量分為以下幾種：

.env                # 在所有的環境中被载入
.env.local          # 在所有的環境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

模式則包含production & development

並且在環境變量中只能設定key=value的格式：

//FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

變數名稱我們可以使用：VUE_APP_VARIABLENAME 另外也可以使用NODE_ENV_VARIABLENAME以及BASE_URL_VARIABLENAME

範例：

.env.development
VUE_APP_ADMINNAME=weiwei
.env.production
VUE_APP_ADMINNAME=管理員

在取用的時候，則是使用process.env開頭，後面再接上設定在.env檔案中的變數：

App.vue
<script>
export default {
  data () {
    return {
      name: process.env.VUE_APP_ADMINNAME
    }
  }
}
</script>
.env變數型別

在.env檔案中，所設定的變數，型別都是字串

範例​

以下範例在不同的執行環境會對應到不同的環境變數

  • npm run serve 對應到.env.development
  • live-server 對應到 .env.production
live-server

在使用live-server時，需要先透過npm run build編譯出實際執行的檔案

並且要確認已經有調整公開路徑了。

程式碼​

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
  {{ name }} / {{ typeof name }} <br>
  {{ num }} / {{ typeof num }} <br>
  {{ withquote }} / {{ typeof withquote }}
</template>

<style lang="scss">
@import 'bootstrap';
</style>

<script>
export default {
  data () {
    return {
      name: process.env.VUE_APP_ADMINNAME,
      num: process.env.VUE_APP_THISISNUMBER,
      withquote: process.env.VUE_APP_WITHQUOTE
    }
  }
}
</script>

輸出結果​

使用npm run serve執行的結果(development)

使用npm run serve執行的結果(development)

npm run build後再使用Go Live開啟的結果(production)

npm run build後再使用Go Live開啟的結果(production)